
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>ulist</title>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
	<style type="text/css">
		/* Chart.js */
		@-webkit-keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		@keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}
	</style>
</head>

<body>
<!--顶部菜单 -->
	<div th:replace="~{topleft::topnav}"></div>
	<div class="container-fluid">
		<div class="row">
		<!--左菜单 -->
			<div th:replace="~{topleft::#sidebarMenu(lurl='leftuser')}"></div>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<div class="table-responsive">
						<!-- 查询表单 - 保持原有结构不变 -->
						<form action="#" th:action="@{/ulist}" method="get" class="mb-3">
							<div class="row g-2">
								<div class="col-md-3">
									<input type="text" name="name" class="form-control" placeholder="姓名" th:value="${name}">
								</div>
								<div class="col-md-2">
									<select name="sex" class="form-select">
										<option value="">全部性别</option>
										<option value="男" th:selected="${sex=='男'}">男</option>
										<option value="女" th:selected="${sex=='女'}">女</option>
									</select>
								</div>
								<div class="col-md-3">
									<input type="text" name="address" class="form-control" th:value="${address}" placeholder="地址">
								</div>
								<div class="col-md-2">
									<button type="submit" class="btn btn-primary w-100">搜索</button>
								</div>
								<div class="col-md-2">
									<a href="/ulist" class="btn btn-outline-secondary w-100">重置</a>
								</div>
							</div>
						</form>

						<!-- 数据表格 -->
						<table class="table table-striped table-hover">
							<thead class="table-light">
							<tr>
								<th width="5%">ID</th>
								<th width="10%">姓名</th>
								<th width="8%">性别</th>
								<th width="8%">年龄</th>
								<th width="12%">生日</th>
								<th width="12%">电话</th>
								<th width="20%">地址</th>
								<th width="25%">操作</th>
							</tr>
							</thead>
							<tbody>
							<tr th:each="user : ${pageInfo.list}">
								<td th:text="${user.id}"></td>
								<td th:text="${user.name}"></td>
								<td th:text="${user.sex}"></td>
								<td th:text="${user.age}"></td>
								<td th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}"></td>
								<td th:text="${user.phone}"></td>
								<td th:text="${user.address}"></td>
								<td>
									<div class="btn-group btn-group-sm">
										<a class="btn btn-outline-primary" th:href="@{/user/}+${user.id}">查看</a>
										<a class="btn btn-outline-success" th:href="@{/user/edit/}+${user.id}">编辑</a>
										<a class="btn btn-outline-danger"
										   th:href="@{/delUser/}+${user.id}"
										   onclick="return confirm('确定要删除该用户吗？')">删除</a>
									</div>
								</td>
							</tr>
							<!-- 空数据提示 -->
							<tr th:if="${#lists.isEmpty(pageInfo.list)}">
								<td colspan="8" class="text-center text-muted">暂无数据</td>
							</tr>
							</tbody>
						</table>

						<!-- 增强的分页导航 -->
						<div class="row mt-3">
							<div class="col-md-6">
								<div class="dataTables_info">
									显示 <span th:text="${pageInfo.startRow}"></span> 到
									<span th:text="${pageInfo.endRow}"></span> 条，共
									<span th:text="${pageInfo.total}"></span> 条记录
								</div>
							</div>
							<div class="col-md-6">
								<nav class="float-end">
									<ul class="pagination pagination-sm">
										<!-- 首页 -->
										<li class="page-item" th:classappend="${!pageInfo.hasPreviousPage} ? 'disabled'">
											<a class="page-link" th:href="@{/ulist(pageNum=1, name=${name}, sex=${sex}, address=${address})}">
												<i class="bi bi-chevron-double-left"></i>
											</a>
										</li>

										<!-- 上一页 -->
										<li class="page-item" th:classappend="${!pageInfo.hasPreviousPage} ? 'disabled'">
											<a class="page-link" th:href="@{/ulist(pageNum=${pageInfo.prePage}, name=${name}, sex=${sex}, address=${address})}">
												<i class="bi bi-chevron-left"></i>
											</a>
										</li>

										<!-- 页码 -->
										<li class="page-item" th:each="num : ${pageInfo.navigatepageNums}"
											th:classappend="${num == pageInfo.pageNum} ? 'active'">
											<a class="page-link"
											   th:href="@{/ulist(pageNum=${num}, name=${name}, sex=${sex}, address=${address})}"
											   th:text="${num}"></a>
										</li>

										<!-- 下一页 -->
										<li class="page-item" th:classappend="${!pageInfo.hasNextPage} ? 'disabled'">
											<a class="page-link" th:href="@{/ulist(pageNum=${pageInfo.nextPage}, name=${name}, sex=${sex}, address=${address})}">
												<i class="bi bi-chevron-right"></i>
											</a>
										</li>

										<!-- 尾页 -->
										<li class="page-item" th:classappend="${!pageInfo.hasNextPage} ? 'disabled'">
											<a class="page-link" th:href="@{/ulist(pageNum=${pageInfo.pages}, name=${name}, sex=${sex}, address=${address})}">
												<i class="bi bi-chevron-double-right"></i>
											</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>

						<!-- 操作反馈消息 -->
						<div class="alert alert-info alert-dismissible fade show mt-3"
							 th:classappend="${msg==null or msg==''} ? 'd-none'"
							 role="alert">
							<span th:text="${msg}"></span>
							<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
						</div>
					</div>

				</main>
		</div>
	</div>
</body>